<template>
  <div id="header">
    <div class="herder-img">
    <div class="juz">
      <div class="left">
        <img src="@/assets/logo.jpg" alt="">
        <div class="biaoti">
          <!--<span>南京市环境保护在线教育平台</span>-->
          <img src="@/assets/biaotiwenzi.png" alt="">
          <span>南京市生态环境局</span>
        </div>
        <!--<div class="ssk">-->
          <!--<el-input-->
            <!--placeholder="请输入搜索内容"-->
            <!--prefix-icon="el-icon-search"-->
            <!--v-model="values"-->
            <!--style="height: 48px;width: 260px;font-size: 16px;border-top-right-radius: 0;border-bottom-right-radius: 0;"-->
          <!--&gt;-->
          <!--</el-input>-->
          <!--<div class="xian"></div>-->
          <!--<el-button type="primary" class="ssan" @click="serchList()">搜索</el-button>-->
        <!--</div>-->
      </div>
    </div>
    </div>
    <div class="daohang">
      <div class="daohang-c" @click="toPath('home')" style="padding: 0 20px">
        <img src="@/assets/home-yellow.png" alt="" v-if="$route.path == '/'">
        <img src="@/assets/home-white.png" alt="" v-else>
        <div class="daohang-cc" :class="$route.path == '/'?'active':''">首页</div>
        <div class="shuxian"></div>
      </div>
      <div class="daohang-c" @click="toPath('informationService')">
        <div class="daohang-cc" :class="$route.path == '/informationService'?'active':''">热点专题</div>
        <div class="shuxian"></div>
      </div>
      <div class="daohang-c" @click="toPath('series')">
        <div class="daohang-cc" :class="$route.path == '/series'?'active':''">直播课程</div>
        <div class="shuxian"></div>
      </div>
      <div class="daohang-c" @click="toPath('questionBank')">
        <div class="daohang-cc" :class="$route.path == '/questionBank'?'active':''">学习资料</div>
        <div class="shuxian"></div>
      </div>
      <div class="daohang-c" @click="toPath('notice')">
        <div class="daohang-cc" :class="$route.path == '/notice'?'active':''">信息资讯</div>
        <div class="shuxian"></div>
      </div>
      <div class="daohang-c" @click="toPath('examList')">
        <div class="daohang-cc" :class="$route.path == '/examList'?'active':''">考试中心</div>
      </div>
      <div class="right" style="box-sizing: border-box" @click="loginShow = true" v-if="userName == ''">
        <el-avatar :size="36" :src="circleUrl1" style="vertical-align: middle"></el-avatar>
        <span style="vertical-align: middle;margin-left: 8px;color: #fff;font-size: 16px;">登录</span>
      </div>
      <div class="right" style="box-sizing: border-box;cursor: pointer;" v-else @click="toUser">
        <el-avatar :size="36" :src="circleUrl2" style="vertical-align: middle"></el-avatar>
        <span style="vertical-align: middle;margin-left: 8px;color: #fff;font-size: 16px;">{{userName}}</span>
      </div>
    </div>
    <!--右部导航-->
    <div class="rightNav" id="rightNav" @mousedown="move" v-show="rightNavShow">
      <i class="el-icon-close" @click="rightNavShow = false"></i>
      <el-avatar :size="100" :src="circleUrl2" style="position: absolute;top:39px;left:70px;"></el-avatar>
      <div class="nav-name"><div class="ccsl">{{userName}}</div></div>
      <div class="nav-text">
        <div>{{userType}}</div>
        <div v-if="learning==''">您还未开始学习课程哦！</div>
        <div  v-if="learning==''" style="color: #FFF000;cursor: pointer;" @click="toPath('informationService')">去学习 ></div>
        <div class="ccsl" v-if="learning!=''">正在学习 : {{learning}}</div>
        <div v-if="learning!=''">积分：{{integral}}</div>
        <div v-if="learning!=''">学时：{{period}}</div>
      </div>
      <div class="nav-backtop" @click="FnBackTop">返回顶部</div>
    </div>
    <login :loginShow="loginShow" @close="close" @reload="reload"></login>
  </div>
</template>

<script>
  import {queryUser,verify,queryLearnCourse} from '@/request/api'
  import {getToken,removeToken} from '@/request/auth'
  import login from './login'
export default {
      components: {
        login
      },
  name: 'header',
  data () {
    return {
      loginShow: true,
      circleUrl1: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      circleUrl2: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      values: '',
      learning: '南京在行动二期',
      rightNavShow: true,//右边窗口是否显示
      userName: '',
      userType: '',
      integral: '',
      period: ''
    }
  },
  mounted(){
    window.addEventListener('scroll', this.scrollToTop);
  },
  destroyed(){
    window.removeEventListener('scroll', this.scrollToTop);
  },
  created() {
    if(getToken()==undefined || getToken()=='' || getToken()==null) {
      this.loginShow = true
    }else {
      if(localStorage.getItem('userInfo')!=null&&localStorage.getItem('userInfo')!=undefined) {
        this.userName = JSON.parse(localStorage.getItem('userInfo')).userName
        this.integral = JSON.parse(localStorage.getItem('userInfo')).integral
        this.period = JSON.parse(localStorage.getItem('userInfo')).period
        if(JSON.parse(localStorage.getItem('userInfo')).userType==0) {
          this.userType ='企业用户'
        }else if(JSON.parse(localStorage.getItem('userInfo')).userType==1) {
          this.userType ='学校用户'
        }else if(JSON.parse(localStorage.getItem('userInfo')).userType==3) {
          this.userType ='个人用户'
        }else if(JSON.parse(localStorage.getItem('userInfo')).userType==4) {
          this.userType ='环保局用户'
        }
        this.loginShow = false
        this.getInfo()
      }else {
        this.userName = ''
        this.userType = ''
        this.learning = ''
        this.loginShow = true
      }
    }

  },
  methods: {
      getInfo() {
        var params = {
          "_search": true,
          "bgTm": "",
          "data": {
            "userId": JSON.parse(localStorage.getItem('userInfo')).id
          },
          "endTm": "",
          "pageNumber": 1,
          "pageSize": 20
        }
        queryLearnCourse(params).then(res=> {
          if(res.code == 200) {
            if(res.data.records.length!=0) {
                this.learning = res.data.records[0].courseName
            }else {
              this.learning = ''
            }
          }
        }).catch(() => {

        })
      },
    toPath(name) {
          this.$router.push({
            name: name
          })
    },
    close() {
        this.loginShow = false
    },
//    登录弹窗关闭，页面刷新
    reload(){
      this.loginShow = false
      location.reload()
    },
    toUser() {
      this.$router.push({
        name: 'user'
      })
    },
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    FnBackTop() {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },

    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      const that = this
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > 60) {
        that.btnFlag = true
      } else {
        that.btnFlag = false
      }
    },
    toHtgl() {
      window.open('http://www.figter.cn:20010/#/online/exam','_blank')
    },
    serchList() {

    },
//    移动右边窗口
    move(e){
        var odiv = document.getElementById('rightNav');// 获取目标元素
        // console.log('move:'+JSON.stringify(e))
        //计算出鼠标相对点击元素的位置,e.clientX获取的是鼠标的位置，OffsetLeft是元素相对于外层元素的位置
        let x = e.clientX - odiv.offsetLeft;
        let y = e.clientY - odiv.offsetTop;
//         console.log('odiv.offsetLeft:'+odiv.offsetLeft,odiv.offsetTop)
        document.onmousemove = (e) => {
          // 获取拖拽元素的位置
          let left = e.clientX - x;
          let top = e.clientY - y;
//          console.log(document.documentElement.clientHeight,odiv.offsetHeight)
          // 把拖拽元素 放到 当前的位置
          if (left <= -329) {
            left = -329;
          } else if (left >= document.documentElement.clientWidth - odiv.offsetWidth){
            //document.documentElement.clientWidth 屏幕的可视宽度
            left = document.documentElement.clientWidth - odiv.offsetWidth;
          }
//           console.log('left:'+left)

          if (top <= -108) {
            top = -108;
          } else if (top >= document.documentElement.clientHeight - odiv.offsetHeight){
            // document.documentElement.clientHeight 屏幕的可视高度
            top = document.documentElement.clientHeight - odiv.offsetHeight
          }
//           console.log('top:'+top)
          odiv.style.left = left + "px";
          odiv.style.top = top + "px"

        }
        // 为了防止 火狐浏览器 拖拽阴影问题
        document.onmouseup = (e) => {
          document.onmousemove = null;
          document.onmouseup = null
        }
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #header {
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  background: #22944E;
    box-sizing: border-box;
    z-index: 9999;
    height: 248px;
}
  .herder-img {
    background-image: url('../assets/bg.png');
    background-size: cover;
    width: 100%;
    height: 200px;
  }
  .juz {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
  }
  .left {
    float: left;
    margin-top: 50px;
  }
  .left img  {
    vertical-align: middle;
    width: 100px;
    height: 100px;
    margin-right: 20px;
  }
  .left .biaoti {
    vertical-align: middle;
    display: inline-block;
    color: #fff;
    height: 100%;
    text-align: left;
  }
  .left .biaoti :first-child {
    display: block;
    width: 472px;
    height: 42px;
    margin-bottom: 10px;
  }
  .left .biaoti :last-child {
    width: 187px;
    height: 20px;
    font-size: 20px;
    font-family: whz;
    font-weight: bold;
    color: #FFFFFF;
    letter-spacing: 3px;
    margin-left: 2px;
  }
  .daohang {
    height: 48px;
    width: 1200px;
    margin: 0 auto;
  }
  .daohang-c {
    height: 100%;
    padding: 0 35px;
    display: inline-block;
    position: relative;
    cursor: pointer;
  }
  .daohang-c img{
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 2px;
  }
  .daohang-cc {
    height: 48px;
    width: auto;
    color: #fff;
    line-height: 48px;
    font-size: 20px;
    font-weight: 700;
    vertical-align: middle;
    display: inline-block;
  }
  .active {
    color: #FFF100;
  }
  .shuxian {
    height: 28px;
    width: 1px;
    background-color: #fff;
    position: absolute;
    right: 0;
    display: inline-block;
    top: 10px;
  }
  .right {
    float: right;
    height: 48px;
    line-height: 48px;
  }

  .rightNav{
    text-align: center;
    width: 240px;
    height: 496px;
    background-image: url('../assets/suspension-bg.png');
    background-size: cover;
    position: absolute;
    top: 300px;
    right: 0;
    /*z-index: 9;*/
  }
  /deep/ .el-icon-close {
    position: absolute;
    right: 0;
    top: 0;
    color: #22944E;
    font-size: 26px;
  }
  .nav-name {
    width: 180px;
    height: 48px;
    line-height: 48px;
    background: #FFFFFF;
    border-radius: 4px 30px 4px 30px;
    font-size: 20px;
    font-weight: bold;
    color: #22944E;
    position: absolute;
    top: 160px;
    left: 30px;
  }
  .nav-name div {
    width: 75%;
    margin: 0 auto;
  }
  .nav-text {
    color: #fff;
    font-size: 16px;
    position: absolute;
    top: 235px;
    left: 0;
    width: 100%;
  }
  .nav-text div {
    width: 80%;
    margin: 0 auto 30px;
  }
  .nav-backtop {
    font-size: 16px;
    color: #FFFFFF;
    position: absolute;
    bottom: 0;
    left: 20px;
    height: 68px;
    line-height: 98px;
    width: 199px;
    cursor: pointer;
  }
</style>
